<template>
	<view class="container" v-if="!show">
		<Header title="基本信息"></Header>
		
		<view class="form">
			<form @submit="formSubmit">
				<view class='user-info'>
				   <view class='list'>
						<view class='item acea-row row-between-wrapper'>
							<view class='name'>姓名</view>
							<input type='text' placeholder='请输入姓名' name='realName' :value="userInfo.realName" placeholder-class='placeholder'></input>
						</view>
						<view class='item acea-row row-between-wrapper'>
							<view class='name'>学校</view>
							<input type='text' placeholder='请选择学校' readonly name="universityName" @click="show = true" :value='userInfo.universityName' placeholder-class='placeholder'></input>
						</view>
						<!-- <view class='item acea-row row-between-wrapper'>
							<view class='name'>年级</view>
							<picker @change="bindPickerChange" :value="gradeIndex" :range="gradeList" range-key="name">
								<view class="picker">{{userInfo.gradeText}}</view>
							</picker>
						</view> -->
						<view class='item acea-row row-between-wrapper'>
							<view class='name'>入学年份</view>
							<picker @change="bindPickerYearChange" :value="yearIndex" :range="yearList">
								<view class="picker">{{userInfo.year}}</view>
							</picker>
						</view>
						<view class='item acea-row row-between-wrapper'>
							<view class='name'>院系</view>
							<input type='text' placeholder='请填写院系' name='major' placeholder-class='placeholder' :value='userInfo.major'></input>
						</view>
					</view>
					<button class='keepBnt bg-color' formType="submit">立即保存</button>
				</view>
			</form>
		</view>
		
	</view>
	<!-- 选择学校 -->
	<School @change="selectSchool" @back="show = false" v-else></School>
</template>

<script>
	import Header from '@/subpages/components/header.vue'
	import School from '@/subpages/components/school.vue'
	import {
		getUserInfo,
		getGradelist,
		updateUserInfo
	} from '@/api/user.js'
	
	export default {
		components: {
			Header,
			School
		},
		data() {
			return {
				userInfo: {},
				gradeIndex: 0, // 年级下标索引
				gradeList: [], // 年级
				yearIndex: 0, // 入学年份
				yearList: [], // 入学年份数组
				show: false // 学校搜索框
			}
		},
		onLoad() {
			this.getUserInfo().then(() => {
				// this.getGradelist()
				this.getYearlist()
			})
		},
		methods: {
			/**获取用户信息*/
			async getUserInfo() {
				const {data} = await getUserInfo();
				this.userInfo = data
				this.userInfo.gradeText = data.gradeText || '请选择年级'
			},
			// 获取年级
			async getGradelist() {
				const {data} = await getGradelist();
				this.gradeList = data.grade || []
			},
			// 选择年级
			bindPickerChange(e){
				this.gradeIndex = e.detail.value
				this.userInfo.gradeText = this.gradeList[this.gradeIndex].name
				this.userInfo.grade = this.gradeList[this.gradeIndex].value
			},
			// 获取入学年份
			getYearlist() {
				var year= new Date().getFullYear();
				var arr = []
				for(var i = year; i > year - 10; i--){
					arr.push(i)
				}
				this.yearList = arr
				console.log(arr);
			},
			// 选择入学年份
			bindPickerYearChange(e){
				this.yearIndex = e.detail.value
				this.userInfo.year = this.yearList[this.yearIndex]
			},
			// 选择学校
			selectSchool(item){
				this.userInfo.universityId = item.universityId
				this.userInfo.universityName = item.universityName
				this.show = false
			},
			// 编辑用户信息
			formSubmit(e){
				var that = this, value = e.detail.value;
				value.universityId = this.userInfo.universityId || ''
				// value.grade = this.userInfo.grade || ''
				value.year = this.userInfo.year
				console.log(value);
				updateUserInfo(value).then(res => {
					uni.showToast({
						title: res.msg,
						duration: 1000,
						icon: 'none',
					});
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1000)
				})
			}
		}
	}
</script>

<style lang="less" scoped>	
	.user-info .list{background-color:#fff;}
	.user-info .list .item{padding:0 30rpx;height:90rpx;border-top:1rpx solid #eee;}
	.user-info .list .item .name{width:195rpx;font-size:30rpx;color:#333;}
	.user-info .list .item input{width:475rpx;font-size:30rpx;}
	.user-info .list .item .placeholder{color:#ccc;}
	.user-info .list .item picker{width:475rpx;}
	.user-info .list .item picker .picker{width:410rpx;font-size:30rpx;}
	.user-info .list .item picker .iconfont{font-size:43rpx;}
	.user-info .default{padding:0 30rpx;height:90rpx;background-color:#fff;margin-top:23rpx;}
	.user-info .default checkbox{margin-right:15rpx;}
	.user-info .keepBnt{width:690rpx;height:86rpx;border-radius:50rpx;text-align:center;line-height:86rpx;margin:50rpx auto;font-size:32rpx;color:#fff;}
	.user-info .wechatAddress{width:690rpx;height:86rpx;border-radius:50rpx;text-align:center;line-height:86rpx;margin:0 auto;font-size:32rpx;color:#fe960f;border:1px solid #fe960f;}
	.bg-color{background-color:#e93323!important;}
</style>